<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-row>
          <el-col :span="6">
            <el-form-item label="名称：" prop="normName">
              <el-input v-model="search.groupName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <qm-table
            ref="qmTable"
            menuType="text"
            keyProp="groupId"
            formRefs="groupForm"
            :data="query"
            :formOptions="{ labelWidth: '120px' }"
            :showCheckbox="false"
            :showView="false"
            :isCustomForm="true"
            :modalOptions="{ height: 630 }"
            :textMap="{ add: '创建考核组' }"
    >
      <qm-table-column field="groupName">名称</qm-table-column>
      <qm-table-column field="enable" fieldtype="enabledisable">是否启用</qm-table-column>

      <template v-slot:form="{ model, models, controlData }">
        <el-tabs style="height: 650px;">
          <el-tab-pane label="考核组信息">
            <el-form
                    class="qm-table-form"
                    ref="groupForm"
                    :model="model"
                    :rules="rules.groupForm"
                    label-width="120px"
            >

              <el-row>
                <el-col :span="12">
                  <el-form-item label="名称：" prop="groupName">
                    <el-input v-model="model.groupName" placeholder="请输入名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否启用：" prop="enable">
                    <el-switch v-model="model.enable" class="drawer-switch"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>


          <el-tab-pane v-if="pageAction === 'edit'" label="组用户">
            <div class="searchBox">
              <el-row>
                <el-col :span="6">
                  <el-select
                          v-model="searchUsers"
                          value-key="value"
                          multiple
                          filterable
                          remote
                          placeholder="请输入关键词"
                          :remote-method="remoteMethod"
                  >
                    <el-option
                            v-for="item in users"
                            :key="item.userId"
                            :label="`${item.label}  (${item.loginId})`"
                            :value="item"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button type="primary" @click="addUsers" icon="el-icon-plus">添加</el-button>
                </el-col>
              </el-row>
            </div>

            <qm-table
                    ref="qmTableUser"
                    keyProp="id"
                    menuType="text"
                    :urls="{query:'/eip/kpi/groupUser/query', delete: '/eip/kpi/groupUser/delete'}"
                    :beforeQuery="beforeQueryUser"
                    :showCheckbox="false"
                    :showEdit="false"
                    :showToolbar="false"
            >
              <qm-table-column field="loginId">登录账号</qm-table-column>
              <qm-table-column field="userName">用户名</qm-table-column>
            </qm-table>
          </el-tab-pane>


          <el-tab-pane v-if="pageAction === 'edit'" label="组考核指标">
            <div class="searchBox">
              <el-row>
                <el-col :span="6">
                  <el-cascader
                          v-model="norms"
                          :options="controlData.norms"
                          :props="{ multiple: true }"
                          placeholder="请选择考核指标"
                          clearable>
                  </el-cascader>
                </el-col>
                <el-col :span="3" :offset="1">
                  <el-button type="primary" @click="addNorms" icon="el-icon-plus">添加</el-button>
                </el-col>
              </el-row>
            </div>

            <qm-table
                    ref="qmTableNorm"
                    keyProp="id"
                    menuType="text"
                    :urls="{query:'/eip/kpi/groupNorm/query', delete: '/eip/kpi/groupNorm/delete'}"
                    :beforeQuery="beforeQueryNorm"
                    :showCheckbox="false"
                    :showEdit="false"
                    :showToolbar="false"
            >
              <qm-table-column field="normName">指标名称</qm-table-column>
              <qm-table-column field="normCode">编码</qm-table-column>
              <qm-table-column field="normType" :renderFunc="renderNormType">类型</qm-table-column>
              <qm-table-column field="scoresType" :renderFunc="renderScoresType">考核类型</qm-table-column>
            </qm-table>
          </el-tab-pane>
        </el-tabs>

      </template>


    </qm-table>

  </div>
</template>

<script>
    import Controller from "@/libs/framework/controller";
    import request from "@/utils/request";

    export default class Instance extends Controller {
        onBeforeInit() {
            this.urls = {
                query: [{url: "/eip/kpi/group/query", method: "post"}],
                save: "/eip/kpi/group/save",
                delete: "/eip/kpi/group/delete",
                entity: "/eip/kpi/group/getEntity",
                model: "/eip/kpi/group/getListModel",
            };
        }

        onAfterGetEntity(result) {
            this.$data.row = result.models.model
            super.onAfterGetEntity(result);
        }

        mixin() {
            return {
                data() {
                    return {
                        row: {},
                        searchUsers: [],
                        users: [],
                        norms: [],
                        rules: {
                            groupForm: {
                                groupName: [{required: true, message: "请输入名称", trigger: "blur"}]
                            }
                        }
                    }
                },
                methods: {
                    beforeQueryUser(params) {
                        params.query.groupId = this.row.groupId;
                        this.remoteMethod();
                        this.searchUsers = [];
                    },
                    beforeQueryNorm(params) {
                        params.query.groupId = this.row.groupId;
                        this.norms = [];
                    },
                    remoteMethod(query) {
                        request({
                            url: "/admin/sysRole/setUsers/userSelect2",
                            method: "get",
                            params: {term: query},
                        })
                            .then((r) => {
                                if (r && !r.initMessage) {
                                    this.users = r.data.map((m) => {
                                        return {
                                            value: m.userId,
                                            userId: m.userId,
                                            label: m.userName,
                                            loginId: m.loginId,
                                        };
                                    });
                                } else {
                                    reject(r.initMessage || "数据请求失败");
                                }
                            })
                            .catch((e) => {
                                reject(e);
                            });
                    },
                    addUsers() {
                        if (null == this.searchUsers || this.searchUsers.length == 0) {
                            this.$message("请先选择用户");
                            return;
                        }
                        this.searchUsers.forEach((item) => {
                            delete item.label;
                            delete item.value;
                        });
                        request({
                            url: "/eip/kpi/groupUser/addUsers",
                            method: "post",
                            data: {
                                groupId: this.row.groupId,
                                users: this.searchUsers,
                            },
                        })
                            .then((r) => {
                                if (r && !r.initMessage) {
                                    this.$message({
                                        message: "添加成功",
                                        type: "success",
                                    });
                                    this.$refs["qmTableUser"].refresh();
                                } else {
                                    reject(r.initMessage || "数据请求失败");
                                }
                            })
                            .catch((e) => {
                                reject(e);
                            });
                    },
                    addNorms() {
                        let normIds = [];
                        this.norms.forEach(norm => {
                            norm.forEach(n => {
                                if (n !== undefined) {
                                    normIds.push(n)
                                }
                            })
                        })
                        if (normIds.length === 0) {
                            this.$message("请先选择指标");
                            return;
                        }
                        request({
                            url: "/eip/kpi/groupNorm/addNorms",
                            method: "post",
                            data: {
                                groupId: this.row.groupId,
                                normIds: normIds.toString(),
                            },
                        })
                            .then((r) => {
                                if (r && !r.initMessage) {
                                    this.$message({
                                        message: "添加成功",
                                        type: "success",
                                    });
                                    this.$refs["qmTableNorm"].refresh();
                                } else {
                                    reject(r.initMessage || "数据请求失败");
                                }
                            })
                            .catch((e) => {
                                reject(e);
                            });
                    },
                    renderNormType(data, row, column) {
                        let find = this.super.$util.find(
                            this.controlData.normTypes,
                            (item) => {
                                return item.value === data;
                            }
                        );
                        return (find || {}).key;
                    },
                    renderScoresType(data, row, column) {
                        let find = this.super.$util.find(
                            this.controlData.scoresTypes,
                            (item) => {
                                return item.value === data;
                            }
                        );
                        return (find || {}).key;
                    },
                }
            }
        }
    }
</script>

<style scoped>

</style>
